<!DOCTYPE html>
<html>
<head>
    <title>后台管理系统</title>
	<meta charset="UTF-8">
   
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.0.3/jquery.js" ></script>
    <script type="text/javascript" src="/app/assets/lib/ajaxfileupload.js" ></script>
   
    <script type="text/javascript">
    $(function() {
    	$("#usRequest").click(function(){
	    	$.ajax("/test/user/120", {		
	        type: "POST",
	        contentType: "application/x-www-form-urlencoded",
	        success: function(data, status, xhr) {
	           console.log(data);
	           console.log(xhr.getResponseHeader('Content-Type'));
	        },
	        error: function (responseData, textStatus, errorThrown) {
	            //alert("Failed: "+responseData+"/"+textStatus+"/"+errorThrown);
	            console.log(responseData);
	        	
	        }
	    
	      });
		});
    	
    	//Control获取不到
		$("#usRequestJSON1").click(function(){
			
			var app = {};
			app.applyType = "zzz";
			app.applyName = "ggg";
			app.memo = "kkk";
			
			
	    	$.ajax("/test/js_app/", {		
	        type: "POST",
	        data: app,
	        success: function(data, status, xhr) {
	           console.log(data);
	           //console.log(xhr.getResponseHeader('Content-Type'));
	        },
	        error: function (responseData, textStatus, errorThrown) {
	            //alert("Failed: "+responseData+"/"+textStatus+"/"+errorThrown);
	            console.log(responseData);
	        	
	        }
	    
	      });
		});
		
        //Control可以获取到
		$("#usRequestJSON2").click(function(){
			
			var us = {};
			us.userName = "zzz";
			us.employeeName = "ggg";
			us.email = "kkk";
			
	    	$.ajax("/test/js_user", {		
	        type: "POST",
	        //contentType: "application/json",
	        data: us,
	        success: function(data, status, xhr) {
	           console.log(data);
	           //console.log(xhr.getResponseHeader('Content-Type'));
	        },
	        error: function (responseData, textStatus, errorThrown) {
	            //alert("Failed: "+responseData+"/"+textStatus+"/"+errorThrown);
	            console.log(responseData);
	        	
	        }
	    
	      });
		});
		
		$("#usRequestList").click(function(){
			
			var apps = [];
			
			var app = {};
			app.applyType = "zzz";
			app.applyName = "ggg";
			app.memo = "kkk";
			
			apps.push(app);
			
	    	$.ajax("/test/js_list/", {		
	        type: "POST",
	        contentType: "application/json",
	        data: apps,
	        success: function(data, status, xhr) {
	           console.log(data);
	           //console.log(xhr.getResponseHeader('Content-Type'));
	        },
	        error: function (responseData, textStatus, errorThrown) {
	            //alert("Failed: "+responseData+"/"+textStatus+"/"+errorThrown);
	            console.log(responseData);
	        	
	        }
	    
	      });
		});
		
		$("#usRequest404").click(function(){
			
			var apps = [];
			
			var app = {};
			app.applyType = "zzz";
			app.applyName = "ggg";
			app.memo = "kkk";
			
			apps.push(app);
			
	    	$.ajax("/test/404/", {		
	        type: "POST",
	        contentType: "application/json",
	        data: apps,
	        success: function(data, status, xhr) {
	           console.log(data);
	           //console.log(xhr.getResponseHeader('Content-Type'));
	        },
	        error: function (responseData, textStatus, errorThrown) {
	            //alert("Failed: "+responseData+"/"+textStatus+"/"+errorThrown);
	            console.log(responseData);
	        	
	        }
	    
	      });
		});
		
		
		$("#upload-file-input").on("change", uploadFile);
	});
    
    /**
     * Upload the file sending it via Ajax at the Spring Boot server.
     */
    function uploadFile() {
      $.ajax({
        url: "/file/upload",
        type: "POST",
        data: new FormData($("#upload-file-form")[0]),
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        cache: false,
        success: function () {
          // Handle upload success
          $("#upload-file-message").text("File succesfully uploaded");
        },
        error: function () {
          // Handle upload error
          $("#upload-file-message").text(
              "File not uploaded (perhaps it's too much big)");
        }
      });
    } // function uploadFile
    
    function Upload() {
    	$.ajaxFileUpload({
            url : '/file/upload/',
            secureuri : false,
            fileElementId : 'fileToUpload',
            dataType : 'json',//此时指定的是后台需要返回json字符串,前端自己解析,可以注释掉.后台直接返回map
            data : {
                name : 'kk'
            },
            success : function(data, status) {
                alert("success");
                console.log(data);
                
            },
            error : function(data, status, e) {
                
                //这里处理的是网络异常，返回参数解析异常，DOM操作异常  
                alert("上传发生异常");
            }
        })
	}
    </script>
    
    <style type="text/css">
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            max-width: 300px;
            padding: 19px 29px 29px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }

        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }

    </style>  
</head>
<body>
<div class="container">


	
     <div class="header">
            <div class="logo" onclick=homePage>主页</div>
     </div>

        <h2 class="form-signin-heading">测试API请求</h2>
        <p><button class="btn btn-large btn-primary"  id="usRequest">测试请求调用</button></p>
        <p><button class="btn btn-large btn-primary"  id="usRequestJSON1">测试传递复杂JSON参数1</button></p>
        <p><button class="btn btn-large btn-primary"  id="usRequestJSON2">测试传递复杂JSON参数2</button></p>
        <p><button class="btn btn-large btn-primary"  id="usRequestList">测试传递复杂列表</button></p>
        <p><button class="btn btn-large btn-primary"  id="usRequest404">测试404请求</button></p>
        
        　<div >
        <form id="upload-file2-form">
      	<input type="file" id="file" name="file" onchange="Upload();"/> 
        <input type="hidden" id="pic" name="pic" />
        </form>
      </div> 
      
      <!-- Upload file form -->
	  <form id="upload-file-form">
	    <label for="upload-file-input">Upload your file:</label>
	    <input id="upload-file-input" type="file" name="uploadfile" accept="*" />
	    <br />
	    <span id="upload-file-message"></span>
	  </form>
                   
</div>
</body>
</html>